import {leaveStyles} from "../../styles/leaveStyles.ts";
import {Button, Text} from "@rneui/themed";
import React, {useState} from "react";
import {ScrollView, View} from "react-native";
import {useLeaveForm} from "./hooks/useLeaveForm.ts";
import {FormProvider} from "react-hook-form";
import * as FormItems from "../../components/FormItems.tsx";
import {FileImport} from "../../components/FileImport.tsx";

const LEAVE_TYPE= [
    {label: '调研', value: "1"},
    {label: '培训', value: "2"},
    {label: '公务、行政会议', value: "3"},
    {label: '因私', value: "4"},
    {label: '学术会议',value: "5"},
    {label: '其他',value: "6"}
]
export const CreateLeaveScreen = ({navigation, route}: any) => {
    const {methods, onSubmit} = useLeaveForm();
    const [uploadedFiles, setUploadedFiles] = useState<{ url: string, name: string, size: number }[]>([]);
    const {watch} = methods;
    const startDate = watch("startDate");
    const endDate = watch("endDate");
    return (
        <View style={leaveStyles.container}>
            <ScrollView contentContainerStyle={leaveStyles.formContainer}>
                <Text style={leaveStyles.title}>广西大学请示请假报告登记表</Text>
                <FormProvider {...methods}>
                    <FormItems.DatePicker
                        name={"startDate"}
                        label={"开始日期"}
                        minimumDate={new Date().toString()}
                        maximumDate={endDate}
                    />
                    <FormItems.DatePicker
                        name={"endDate"}
                        label={"结束日期"}
                        minimumDate={startDate}
                    />
                    <FormItems.Chooser
                        name={"type"}
                        label={"请假类型"}
                        options={LEAVE_TYPE}
                        multi={true}
                    />
                    <FormItems.Multi
                        name={"position"}
                        label={"前往地点"}
                        defaultValues={{place: ""}}
                    >
                        <FormItems.PlacePicker
                            name={"item"}
                            label={""}
                            mainlandHolder={"请选择国内地点"}
                            abroadHolder={"请输入境外国家（地区）和详细地址"}
                        />
                    </FormItems.Multi>
                    <FormItems.MultilineInput
                        name={"remark"}
                        label={"备注"}
                    />
                    <FileImport
                        maxSize={1024 * 1024 * 20}
                        maxCount={10}
                        onFileChange={(files: any[]) => {
                            setUploadedFiles([...uploadedFiles, ...files]);
                        }}
                    />
                </FormProvider>

                <Button title="提交" onPress={methods.handleSubmit(onSubmit)}/>
            </ScrollView>
        </View>
    )
}